<template>
  <div class="list-container">
    <form action="">
      <fieldset class="todo-list">
        <legend class="todo-list__title">The Todo List</legend>
        <label class="todo-list__label">
          <input type="checkbox">
          <i class="check"></i>
          <span>Make My AnimationCSS List</span>
        </label>
        <label class="todo-list__label">
          <input type="checkbox">
          <i class="check"></i>
          <span>Create The First Project</span>
        </label>
      </fieldset>
    </form>
  </div>
</template>
<style lang="scss" scoped>
.list-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 180px;
  margin-top: 20px;
  background: #1a1e23;
  color: #fff;
}
.todo-list {
  display: flex;
  flex-direction: column;
  background: #162740;
  border:transparent;
  padding: 0 75px 10px 30px;
  &__title {
    padding: 3px 6px;
    color: #f1faee;
    background-color: #264456;
  }
  &__label {
    display: flex;
    align-items: center;
    margin: 16px 0;
    font-size: 20px;
    font-family: Lato, sans-serif;
    color: #f1faee;
    cursor: pointer;

    input[type="checkbox"] {
      opacity:0;
      & + .check {
        position: absolute;
        width: 20px;
        height: 20px;
        border: 2px solid #fff;
        transition: 0.2s;
      }
      &:checked + .check {
        width: 20px;
        height: 15px;
        border-top:transparent;
        border-right:transparent;
        transform: rotate(-45deg);
      }
      &~span {
        position: relative;
        left: 30px;
        transition: 0.5s;
        &::before {
          position: absolute;
          content: '';
          top:50%;
          left: 0;
          width: 100%;
          height: 2px;
          background: #f1faee;
          transform: scaleX(0);
          transform-origin: right;
          transition:transform 0.2s;
        }
      }
      &:checked ~span {
        color:#585b57;
        &::before {
          transform: scaleX(1);
          transform-origin: left;
        }
      }
    }
  }
}

</style>

